<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form :model="params">
          <el-form-item label="楼宇名称：" size="small">
            <el-input v-model="params.name" placeholder="请输入楼宇名称" style="width: 220px" />
            <el-button type="primary" style="margin: 0 15px" @click="onQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-button
        type="primary"
        size="mini"
        style="margin: 0 0 5px 0"
        @click="onSubmit('add')"
      >添加楼宇</el-button>
      <template>
        <el-table :data="list" style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="100"
          >
            <template #default="{$index}">
              {{ $index+1+ 10 *(params.page-1) }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="楼宇名称" width="200" />
          <el-table-column prop="floors" label="层数" width="200" />
          <el-table-column prop="area" label="在管面积(m²)" width="200" />
          <el-table-column
            prop="propertyFeePrice"
            label="物业费(元/m²)"
            width="220"
          />
          <el-table-column prop="status" label="状态" />
          <el-table-column label="操作">
            <template #default="{row}">
              <el-button type="text" @click="onSubmit('edit',row.id)">编辑</el-button>
              <el-button type="text" @click="onSubmit('del',row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>
    <!-- 分页 -->
    <el-row type="flex" justify="end">
      <!-- <span class="demonstration">调整每页显示条数</span> -->
      <el-pagination
        :current-page="params.page"
        layout="total,  prev, pager, next,sizes, jumper"
        :total="total"
        :page-size="params.pageSize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </el-row>
    <!-- 删除的弹出层 -->
    <!-- <el-dialog
      :visible.sync="dialogVisible"
      width="15%"
    >
      <span>确认删除当前楼宇？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="del">确 定</el-button>
      </span>
    </el-dialog> -->
    <!-- 弹出层  因为编辑和添加弹出层字段一致，封装起来-->
    <add-bul ref="bulRef" :visible.sync="visible" @onSuccess="onLoad" />
  </div>
</template>

<script>
import { delBulApi, getBuilListApi } from '@/api/building'
import addBul from './components/add-bul.vue'
export default {
  components: { addBul },
  data() {
    return {
      params: {
        // 当前页码
        page: 1,
        // 每页大小
        pageSize: null,
        // 楼宇名称模糊 查询
        name: ''
      },
      // 总数
      total: null,
      list: [],
      status: '',
      // 控制弹出层
      visible: false,
      // 删除弹框
      dialogVisible: false,
      pid: ''
    }
  },

  created() {
    // 进入页面刷新数据(重新获取请求)
    this.onLoad()
  },
  methods: {
    // 发请求 传数据给定义的空数组 渲染数据
    async onLoad() {
      const res = await getBuilListApi(this.params)
      this.list = res.data.rows
      this.total = res.data.total
      // console.log(res.data.rows[0].status)
      // 判断状态
      for (let i = 0; i < this.list.length; i++) {
      // console.log(this.list[i])
        if (this.list[i].status === 0) {
          this.list[i].status = '空置中'
        } else {
          this.list[i].status = '租赁中'
        }
      }
    },
    // 点击查询
    onQuery() {
      this.onLoad()
    },
    // 点击判断是添加还是编辑

    async onSubmit(type, id) {
      if (type === 'add') {
        this.visible = true
      }
      if (type === 'edit') {
        // 获取编辑表单id 接收接口传回来的id
        // 点击编辑回填数据  封装api 在子组件定义一个方法把请求回来的数据传给定义的表单数据  在父组件点击后当前点击的id传给子组件定义的方法 实现回填数据
        this.visible = true
        this.$refs.bulRef.id = id
        console.log(this.$refs.bulRef.id)
        // console.log(id)
        this.pid = this.$refs.bulRef.id
        this.$refs.bulRef.onEdit(id)
      }
      if (type === 'del') {
        // this.dialogVisible = true
      //  / 封装api 提示用户二次确认 调用接口 提示用户删除成功 关闭 刷新
        this.$confirm('您确定要删除吗？').then(async() => {
          await delBulApi(id)
          this.$message.success('删除成功')
          // / 点击删除显示提示框 点击确定 删除 判断当前页是否删完 删完页码跳到前一页
          if (this.list.length === 1) {
            this.params.page--
          }
          this.onLoad()
        })
      }
    },
    // 分页
    // 监听页数
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
      // 重新刷新页面
      this.onLoad()
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      // 重新刷新页面
      this.onLoad()
    }
  }
}
</script>

<style>
/* *{
  display: flex;
  justify-content: space-between;
  : ;
} */
</style>
